/*
 *
 * (c) Copyright Ascensio System Limited 2010-2023
 * 
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
*/


@import "../../../../skins/default/params.less";

.memoryQuotaBlock{
    margin-bottom: 45px;
}
div.recalculate {
    margin: 0 auto 30px auto;
    width: 600px;
}
.recalculateQuotaBlock {
    background: no-repeat url('../../../../skins/default/images/svg/settings/recalculate_quota.svg') 60px 40px transparent;
    background-size: 150px;
    height: 255px;
    display: flex;
    padding-left: 225px;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    outline: none;

    .inner {
        .background {
        }

        .title {
            display: block;
            margin: 0 0 12px 0;
        }

        .description {
            display: block;
            line-height: 20px;
            margin-bottom: 15px;
        }
    }
}
.informationBlock {
    tr:not(:last-child) td {
        padding: 0px 16px 8px 0;
    }

    tr:last-child td {
        padding: 0px 16px 0 0;
    }
}
.editUsersQuotaForm {
    display: inline-block;
}
p.lastUpdate{
    color: #787878;
    font-size: 11px;
}

#peopleHeaderMenu.no-quota {
    .menuActionSelectAll,
    .editUsersQuotaForm,
    .menuEditQuota,
    .menuNoQuota {
        display: none !important;
    }
}
.menuActionSelectAll,
.editUsersQuotaForm,
.menuEditQuota,
.menuNoQuota {
    &.display-none {
        display: none !important;
    }
}
.quotaSettingBlock {
    .set-quota {
        margin-top: 7px;
    }
}
#tableForPeopleNavigation {
    height: 24px;
    width: 100%;

    .tl-combobox {
        margin-bottom: 1px;
        vertical-align: middle;
    }
}
#totalUsers {
    margin-right: 20px;
}
#peopleContent {
    .used-space-info {
        width: 115px;

        .dotted {
            position: relative;
            padding-left: 2px;

            &:after {
                border-left: 4px solid transparent;
                border-right: 4px solid transparent;
                border-top: 4px solid @textColorGrayDark;
                content: "";
                height: 0;
                position: absolute;
                right: -10px;
                top: 50%;
                width: 0;
                margin-top: -1px;
            }
        }
    }

    .item-icon {
        width: 16px;
        height: 16px;
        margin: 0 5px 0 0;
        float: left;

        .item-svg {
            width: 16px;
            height: 16px;
            fill: @textColorGrayDark;
        }
    }
}

#peopleHeaderMenu,
#peopleContent,
.quotaSettingBlock {
    .set-quota.display-none {
        display: none;
    }

    .set-quota {
        display: flex;
        width: 100%;
        color: @textColor;

        input {
            width: 45px;
            height: 20px;
            margin-right: 3px;
        }

        .sizes {
            width: auto;
            padding-top: 1px;
            margin-right: 8px;
            cursor: pointer;

            .val {
                border: solid 1px @borderColor2;
                padding: 3px 22px 0px 4px;
                height: 19px;
                margin-top: -1px;
                position: relative;
                background: @body-color;

                &:after {
                    border-left: 4px solid transparent;
                    border-right: 4px solid transparent;
                    border-top: 4px solid @textColorGrayDark;
                    content: "";
                    height: 0;
                    position: absolute;
                    right: 7px;
                    top: 50%;
                    width: 0;
                    margin-top: -1px;
                }
            }
        }

        .save-btn {
            position: relative;
            cursor: pointer;
            width: 23px;
            height: 23px;
            border: 1px solid @border-button-default;
            border-radius: 3px;
            margin-right: 5px;
            background: @body-color;

            .mark {
                position: absolute;
                width: 8px;
                height: 5px;
                right: 6px;
                top: 6px;
                border: 3px solid @textColorGrayDark;
                transform: rotate(-45deg);
                border-width: 0 0 3px 3px;
            }
        }

        .close-btn {
            position: relative;
            cursor: pointer;
            width: 23px;
            height: 23px;
            border: 1px solid @border-button-default;
            border-radius: 3px;
            background: @body-color;

            .mark {
                background: url('../../../../skins/default/images/svg/people/close.svg') center no-repeat;
                background-size: contain;
                display: block;
                margin: 5px 0px 0px 6px;
                width: 12px;
                height: 12px;
            }
        }
    }
}
.quotesBlock {
    margin: 0 0 45px 0;

    .header-base {
        margin: 0 0 15px 0;

        img {
            margin-right: 5px;
            vertical-align: bottom;
        }
    }

    .moreBox {
        margin-top: 15px;

        .link {
            margin-left: 15px;
        }
    }

    .empty {
        height: 40px;
        border-left: none;
        border-right: none;
        line-height: 40px;
        padding-left: 15px;
    }

    .table-list {
        .icon {
            padding: 5px 0 5px 15px;
            position: relative;

            .disabled {
                background: url(../img/disabled.png) center no-repeat;
                display: block;
                height: 16px;
                left: 24px;
                position: absolute;
                top: 15px;
                width: 16px;
            }
        }

        .name {
            width: 100%;
            padding: 5px 10px;
        }

        .value {
            padding: 5px 15px 5px 0;
            text-align: right;
            white-space: nowrap;
        }
    }
}

.tabs-header {
    margin-bottom: 16px;
    position: relative;

    .tabs-header-item {
        cursor: pointer;
        display: block;
        min-width: 50px;
        max-width: 100px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-right: 20px;
        float: left;
        white-space: nowrap;

        &.active {
            cursor: default;
            font-weight: bold;
        }

        img {
            display: block;
            width: 24px;
            height: 24px;
            margin: 0 auto 4px;
        }
    }

    .tabs-header-corner {
        background: url("../img/@{corner-img}") center no-repeat;
        position: absolute;
        width: 11px;
        height: 7px;
        top: 50px;
        left: 19.5px;
    }
}

.tabs-content {
    .tabs-content-item {
        display: none;
        max-width: 800px;

        &.active {
            display: block;
        }
    }
}

body.media-width-0-1200 {
    .tabs-header .tabs-header-item {
        margin-right: 20px;
    }
}